import React, { useState } from 'react';

function ScrollList({ ScrollListProps: { rowHeight, dataSource } }) {
  const [scrollTop, setScrollTop] = useState(0);

  const onScroll = (e) => {
    const { scrollTop } = e.target;
    setScrollTop(scrollTop);
  }

  const limit = () => {
    return Math.ceil(500 / rowHeight);
  }

  const renderDisplayContent = () => {

    const startIndex = Math.floor(scrollTop / rowHeight);
    const endIndex = Math.min(startIndex + limit(), dataSource.length - 1);

    const content = [];
    for (let i = startIndex; i <= endIndex; i++) {
      content.push(<div key={i}
        style={{
          width: '100%',
          height: rowHeight + 'px', lineHeight: rowHeight + 'px',
          left: 0,
          position: 'absolute',
          top: i * rowHeight
        }}>
        {dataSource[i]}
      </div>)
    };
    console.log(content, 'content');
    return content
  };

  return (<div style={{
    overflowX: 'hidden',
    overflowY: 'auto',
    height: 500,
    border: '1px solid black'
  }}
    onScroll={onScroll}
  >
    <div
      style={{
        height: dataSource.length * rowHeight + 'px',
        position: 'relative'
      }}
    >
      {
        renderDisplayContent()
      }

      {/* {
        dataSource.map(e => (<div style={{
          height: rowHeight + 'px', lineHeight: rowHeight + 'px',
        }} >{e}
        </div>))
      } */}
    </div>
  </div>)
}
export default ScrollList